import { Button, Table, Switch, Image } from 'antd';
import { useState } from 'react'
import * as XLSX from 'xlsx';
import { useHeight } from '../useHeight';

type ImportProps = {}
interface DataType {
  proid: string
  proname: string
  img1: string
  originprice: number
  discount: number
  sales: number
  stock: number
  category: string
  brand: string
  issale: number
  isrecommend: number
  isseckill: number
}
export const Import = (props: ImportProps) => {
  const [proList, setProList] = useState([])
  const height = useHeight()
  const importExcel = () => {
    const file = (document.getElementById('fileRef') as HTMLInputElement).files![0]
    const reader = new FileReader()
    reader.readAsBinaryString(file!) // 转成 二进制格式
    reader.onload = function () {
      const workbook = XLSX.read(this.result, { type: 'binary' });
      const t = workbook.Sheets['list'] // 拿到表格数据
      console.log(t)
      const r: any = XLSX.utils.sheet_to_json(t) // 转换成json格式
      console.log(r)
      setProList(r)
      // 将r的数据上传至服务器
    }
  }

  
  return (
    <>
      <Button onClick={() => {
        (document.getElementById('fileRef') as HTMLInputElement).click()
      }}>导入数据</Button>
      <input type="file" hidden id = 'fileRef' onChange = { importExcel }/>
      <Table dataSource={ proList }  rowKey = "proid" scroll={{ y: height}}>
      <Table.Column
          title="序号"
          render={(text, record, index) => { return <span>{ index + 1 }</span>}}
        ></Table.Column>
        <Table.Column
          title="产品分类"
          dataIndex="category"
        ></Table.Column>
        <Table.Column
          title="产品品牌"
          dataIndex="brand"
        ></Table.Column>
        <Table.Column
          title="产品名称"
          dataIndex="proname"
        ></Table.Column>
        <Table.Column
          title="图片"
          dataIndex="img1"
          render={ (text) => {return <Image src={text} width={80} height={80} /> }}
        ></Table.Column>
        <Table.Column
          title="产品价格"
          dataIndex="originprice"
          sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
        ></Table.Column>
        <Table.Column
          title="产品折扣"
          dataIndex="discount"
          sorter={(a: DataType, b: DataType) => a.discount - b.discount}
        ></Table.Column>
        <Table.Column
          title="产品销量"
          dataIndex="sales"
          sorter={(a: DataType, b: DataType) => a.sales - b.sales}
        ></Table.Column>
        <Table.Column
          title="产品库存"
          dataIndex="stock"
          sorter={(a: DataType, b: DataType) => a.stock - b.stock}
        ></Table.Column>
        <Table.Column
          title="是否上架"
          dataIndex="issale"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
        <Table.Column
          title="是否推荐"
          dataIndex="isrecommend"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
        <Table.Column
          title="是否秒杀"
          dataIndex="isseckill"
          render={ (text) => {return <Switch checked = { text === 1 } /> }}
        ></Table.Column>
        
      </Table>
  
    </>
  )
}